<template>
	<div>

    <el-row>
      <el-col :span="24">
        <el-card class="card-image" :style="`background-image: url('/images/财务工作台.png');`" shadow="hover">
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 20px;"></div>

    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="top">
            <el-text>
              本月采购下单额
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                197.8万元
              </template>
              <el-text>
                197.8万元
              </el-text>
            </el-tooltip>
          </div>
          <div class="image">
            <el-tooltip placement="bottom">
              <template #content>
                <div>
                  <el-text>
                    2023年01月01日-2023年12月31日
                  </el-text>
                </div>
                <div>
                  <el-text>
                    订单总额(求和)
                  </el-text>
                  <el-text>
                    1581.2万元
                  </el-text>
                </div>
              </template>
              <el-image src="/images/j1.png"></el-image>
            </el-tooltip>

          </div>
          <div class="bottom">
            <el-text>
              环比增长率 -87.5%
              <el-icon :size="12" color="#67C23A">
                <CaretBottom />
              </el-icon>
            </el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="top">
            <el-text>
              本月采购下单量
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                274000元
              </template>
              <el-text>
                274000元
              </el-text>
            </el-tooltip>
          </div>
          <div class="image">
            <el-image src="/images/j2.png"></el-image>
          </div>
          <div class="bottom">
            <el-text>
              环比增长率 0%
              <!-- 						<el-icon :size="12" color="#67C23A">
                <CaretBottom />
              </el-icon> -->
            </el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="top">
            <el-text>
              本月采购付款
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                2家
              </template>
              <el-text>
                2家
              </el-text>
            </el-tooltip>
          </div>
          <div class="image">
            <el-image src="/images/j3.png"></el-image>
          </div>
          <div class="bottom">
            <el-text>
              环比增长率 -85.7143%
              <el-icon :size="12" color="#67C23A">
                <CaretBottom />
              </el-icon>
            </el-text>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="top">
            <el-text>
              合作中供应商
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                16家
              </template>
              <el-text>
                16家
              </el-text>
            </el-tooltip>
          </div>
          <div class="bottom">
            <el-text></el-text>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 20px;"></div>

    <el-row>
      <el-col :span="24">
        <div class="p_myDiv1">

          <el-card class="p_myCard1" shadow="hover">
            <template #header>
              <div style="font-size: 16px;">待办事项</div>
            </template>
            <div class="p_myDiv2">
              采购需求单
              <el-avatar style="background-color: #ff7919" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              在途采购单
              <el-avatar style="background-color: #40bd93" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              已延期采购单
              <el-avatar style="background-color: #fa9e00" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              待付款采购单
              <el-avatar style="background-color: #d23ce6" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              待回票采购单
              <el-avatar style="background-color: #6647ff" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              审核中采购单
              <el-avatar style="background-color: #3ea1f7" size="small">1</el-avatar>
            </div>
            <div class="p_myDiv2">
              审核中到货单
              <el-avatar style="background-color: #3ea1f7" size="small">1</el-avatar>
            </div>
          </el-card>


          <el-card class="p_myCard3" shadow="hover">
            <template #header>
              <div class="p_myDiv3">
                <div>流程-我发起的</div>
                <div style="height: 10px;">

                  <el-tooltip
                      class="p_span1"
                      effect="light"
                      content="筛选"
                      placement="top"
                  >

                    <el-dropdown
                        :hide-on-click="false"
                        trigger="click">
                      <el-button class="p_myButton1">
                        <img style="width: 20px; height: 20px;" src="/images/svg/筛选.svg">
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>Action 1</el-dropdown-item>
                          <el-dropdown-item>Action 2</el-dropdown-item>
                          <el-dropdown-item>Action 3</el-dropdown-item>
                          <el-dropdown-item>Action 4</el-dropdown-item>
                          <el-dropdown-item>Action 5</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>

                  </el-tooltip>

                  <span class="p_span1">全部</span>
                  <span class="p_span1">待执行</span>
                  <span class="p_span1">已完成</span>

                </div>
              </div>
            </template>
            <el-table :show-header="false" height="284" style="width: 100%">
              <el-table-column prop="date" label="日期"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <div style="height: 20px;"></div>

    <div class="f_container">
      <div class="f_box_first">
        <el-card style="height: 264px; width: 612px;" shadow="hover">
          <template #header>
            <div>
              <span style="font-size: 16px;">销售回款</span>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </div>
      <div class="f_box" style="margin-right: 23px;">
        <el-card style="height: 264px; width: 298px;" shadow="hover">
          <template #header>
            <div>
              <span style="font-size: 16px;">销售退款账单</span>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </div>
      <div class="f_box">
        <el-card style="height: 264px; width: 298px;" shadow="hover">
          <template #header>
            <div>
              <span style="font-size: 16px;">采购支出</span>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </div>
    </div>

    <div style="height: 20px;"></div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: 104px;" shadow="hover">
          <div class="top">
            <el-text>
              本年已签约
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                197.8万元
              </template>
              <el-text>
                197.8万元
              </el-text>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 104px;" shadow="hover">
          <div class="top">
            <el-text>
              本年已回款
            </el-text>
          </div>
          <div class="body">
            <el-tooltip placement="top">
              <template #content>
                274000元
              </template>
              <el-text>
                274000元
              </el-text>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 20px;"></div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="f_myCard" shadow="hover">
          <template #header>
            <div class="f_myDiv1">
              <div>
                <span style="font-size: 16px;">应收客户列表</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span>
              </div>
              <div>
                <div>
                  <el-input
                      style="width: 240px;margin-right: 5px;"
                      placeholder="客户名称"
                      :prefix-icon="Search"
                  />
                </div>
              </div>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="f_myCard" shadow="hover">
          <template #header>
            <div class="f_myDiv1">
              <div><span style="font-size: 16px;">应付供应商列表</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
              <div>
                <el-input
                    style="width: 240px;margin-right: 5px;"
                    placeholder="供应商简称"
                    :prefix-icon="Search"
                />
              </div>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <div style="height: 20px;"></div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="f_myCard" shadow="hover">
          <template #header>
            <div class="f_myDiv1">
              <div>
                <span style="font-size: 16px;">应收订单列表</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span>
              </div>
              <div>
                <div>
                  <el-input
                      style="width: 240px;margin-right: 5px;"
                      placeholder="订单编号"
                      :prefix-icon="Search"
                  />
                </div>
              </div>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="f_myCard" shadow="hover">
          <template #header>
            <div class="f_myDiv1">
              <div><span style="font-size: 16px;">应付采购单列表</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
              <div>
                <el-input
                    style="width: 240px;margin-right: 5px;"
                    placeholder="采购单号"
                    :prefix-icon="Search"
                />
              </div>
            </div>
          </template>
          <el-table style="width: 100%">
            <el-table-column fixed prop="date" label="收款月" />
            <el-table-column prop="name" label="核销金额" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>


    <div style="height: 20px;"></div>

    <el-card style="height: 424px;" shadow="hover">
      <template #header>
        <div class="f_myDiv1">
          <div><span style="font-size: 16px;">收款流水</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="采购单号"
                :prefix-icon="Search"
            />

            <el-button type="primary">
              <el-icon size="18"><Plus /></el-icon>
            </el-button>
          </div>
        </div>
      </template>
      <el-table style="width: 100%">
        <el-table-column fixed prop="date" label="收款月" />
        <el-table-column prop="name" label="核销金额" />
      </el-table>
    </el-card>

    <div style="height: 20px;"></div>

    <el-card style="height: 304px;" shadow="hover">
      <template #header>
        <div class="f_myDiv1">
          <div><span style="font-size: 16px;">付款流水</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="采购单号"
                :prefix-icon="Search"
            />
          </div>
        </div>
      </template>
      <el-table style="width: 100%">
        <el-table-column fixed prop="date" label="收款月" />
        <el-table-column prop="name" label="核销金额" />
      </el-table>
    </el-card>

    <div style="height: 20px;"></div>

    <el-card style="height: 404px;" shadow="hover">
      <template #header>
        <div class="f_myDiv1">
          <div><span style="font-size: 16px;">收款发票</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="采购单号"
                :prefix-icon="Search"
            />
          </div>
        </div>
      </template>
      <el-table style="width: 100%">
        <el-table-column fixed prop="date" label="收款月" />
        <el-table-column prop="name" label="核销金额" />
      </el-table>
    </el-card>

    <div style="height: 20px;"></div>

    <el-card style="height: 424px;" shadow="hover">
      <template #header>
        <div class="f_myDiv1">
          <div><span style="font-size: 16px;">付款发票</span> <span style="font-size: 14px;color: #9a9494">共 4 条</span></div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="采购单号"
                :prefix-icon="Search"
            />
          </div>
        </div>
      </template>
      <el-table style="width: 100%">
        <el-table-column fixed prop="date" label="收款月" />
        <el-table-column prop="name" label="核销金额" />
      </el-table>
    </el-card>

    <div style="height: 20px;"></div>

	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
  import {CaretBottom, Plus, Search, Setting} from "@element-plus/icons-vue";
	const title = ref('财务看板');
</script>

<style scoped lang="scss">
@import '../../assets/css/index.scss';

.f_myCard {
  height: 324px;
}

.f_myDiv1 {
  display: flex;
  justify-content: space-between;
}

.f_box {
  flex: 1;
  width: calc(25% - 12px);
}

.f_box_first {
  margin-right: 30px;
  height: 264px;
  flex: 1;
  width: calc(50% - 8px);
}

.f_container{
  display: flex;
}

.p_myDiv4 {
  left: calc(0% + 0px);
  width: calc(100% + 0px);
  top: 1380px;
  height: 564px;
}

.el-calendar {
  --el-calendar-cell-width: 78px;
}

.p_myButton1 {
  border-color: #5283ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  color: #5283ff;
}

.p_span1 {
  margin: 0px 10px 0px 10px;
}

.p_myDiv3 {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.p_myCard3 {
  left: calc(25% + 4px);
  width: calc(75% - 4px);
  top: 440px;
  height: 364px;
}

.p_myDiv2 {
  display: flex;
  justify-content: space-between;
  border-bottom: #eae2e2 1px solid;
  padding: 5px;
}

.p_myCard3 {
  width: 100%;
  height: 100%;

}

.p_myDiv1 {
  display: flex;
  justify-content: stretch;
}

.p_myCard2 {
  left: calc(25% + 4px);
  width: calc(75% - 4px);
  top: 220px;
}

.p_myCard1 {
  margin-right: 15px;
  width: calc(25% - 12px);
  left: calc(0% + 0px);
  top: 220px;
  height: 384px;
}

.card_myButton {
  display: flex;
  justify-content: start;
  width: 100%;
  background-color: rgb(105, 87, 238);
}

</style>